<template>
  <div>
    <h1>测试</h1>

    <img
      width="300"
      src="https://sanjitian-1256310189.cos.ap-chengdu.myqcloud.com/gin_test/2024/11/2024_11_11_23_45_41_7718_123.png"
      alt=""
    />

    <GG v-for="item in imgArr" :item-i-d="item.id" @close="closeHandler" :key="item.id"></GG>
    <hr />
    <hr />
    <GG2 :img-arr="imgArr"></GG2>

    <hr />
    <hr />
    <GG3 ref="gg3Ref" v-slot="{ item }">
      <div @click="gg3Ref2?.delItem(item)">关闭哈哈哈哈{{ item.id }}</div>
    </GG3>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue'

import GG from './components/GuangGaoItem.vue'
import GG2 from './components/GuangGaoItem2.vue'
import GG3 from './components/GuangGaoItem3.vue'

const gg3Ref2 = useTemplateRef('gg3Ref')

const imgArr = ref<{ id: number; imgSrc: string }[]>()

const closeHandler = (id: number) => {
  console.log(id, '#id')
  // const index = imgArr.value?.findIndex((i) => i.id == id) as number
  // console.log(index, '#index')

  // imgArr.value?.splice(index, 1)

  imgArr.value = imgArr.value?.filter((i) => i.id !== id)
}

onMounted(() => {
  gg3Ref2.value?.setData([
    {
      id: 134,
      imgSrc: 'a.png'
    },
    {
      id: 23423,
      imgSrc: 'a.png'
    },
    {
      id: 234234,
      imgSrc: 'a.png'
    }
  ])

  // GG1：循环传入item  和GG2：传入数组内部循环
  imgArr.value = [
    {
      id: 134,
      imgSrc: 'a.png'
    },
    {
      id: 23423,
      imgSrc: 'a.png'
    },
    {
      id: 234234,
      imgSrc: 'a.png'
    }
  ]
})
</script>

<style></style>
